<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>? + ? = ?</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./lib/prototype.js" type="text/javascript"></script>
  <script src="./lib/scriptaculous.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
  // <![CDATA[
'a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea th tr ul u'.split(' ').each(function(e) {
  window['$' + e] = function() {
    if (arguments[0]) {
      if (arguments[0].nodeType) return Builder.node(e,$A(arguments));
      if (arguments[1]) return Builder.node(e,arguments[0],$A(arguments).slice(1));
      return Builder.node(e,arguments[0]);
    };
    return Builder.node(e);
  }
});

var cont_table = new Array();
var q_table = new Array();
var current_kurl = 0;
var back_stack = new Array();
var fwd_stack = new Array();

function show(el){
  //remove all children from <div id="main">.
  var e = $('main');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild(el);

  var e = $('myback');
  while (e.firstChild) e.removeChild(e.firstChild);
  if (back_stack.length != 0) {
    var back_stack_top = back_stack[back_stack.length - 1];
    e.appendChild($img({src: './back_arrow.png', onclick: 'do_back(' + back_stack_top + ')', alt: 'do_back(' + back_stack_top + ')'}));
  } else {
    e.appendChild($img({src: './back_arrow_dis.png', alt: ''}));
  };

  var e = $('myfwd');
  while (e.firstChild) e.removeChild(e.firstChild);
  if (fwd_stack.length != 0) {
    var fwd_stack_top = fwd_stack[fwd_stack.length - 1];
    e.appendChild($img({src: './fwd_arrow.png', onclick: 'do_fwd(' + fwd_stack_top + ')', alt: 'do_fwd(' + fwd_stack_top + ')'}));
  } else {
    e.appendChild($img({src: './fwd_arrow_dis.png', alt: ''}));
  };
};

function action(before,thunk) {  
  var kurl = cont_table.push(thunk) - 1;  
  q_table[kurl] = before;
  return 'do_action(' + kurl + ')';
};

function do_action(kurl) {
  back_stack.push(current_kurl);
  fwd_stack.pop();
  q_table[kurl] = q_table[kurl].call();
  var thunk = cont_table[kurl];
  thunk(q_table[kurl]);
  current_kurl = kurl;
};

function do_back(kurl) {
  back_stack.pop();
  fwd_stack.push(current_kurl);  
  var thunk = cont_table[kurl];
  thunk(q_table[kurl]);
  current_kurl = kurl;
};

function do_fwd(kurl) {
  back_stack.push(current_kurl);
  fwd_stack.pop();
  var thunk = cont_table[kurl];
  thunk(q_table[kurl]);
  current_kurl = kurl;
};

function c0() {
  var a = {
    x: $('x').value
  };
  return $H(a); 
};

function c1() {
  var a = {
    y: $('y').value
  };
  return $H(a); 
};

function main() {
  back_stack.pop();
  show($div($h1('? + ? = ?'),
	    'please input number',$br(),
	    $form({action: 'javascript:' + action(c0, function(q) {
	      var x = q['x'];
	      show($div($h1(x + ' + ? = ?'),
			'please input number',$br(),
			$form({action: 'javascript:' + action(c1, function(q) {
			  var y = q['y'];
			  show($h1(x + ' + ' + y + ' = ' + (parseInt(x,10) + parseInt(y,10))))
			    })},
			      $input({id: 'y'}),$br(),
			      $input({type: 'submit'}))));
	    })},
		  $input({id:'x'}),$br(),
		  $input({type: 'submit'}))));
};


window.onload = function () {
  action(function() {return $H({})}, main);
  do_action(0);
}

  // ]]>
  </script>
</head>
<body>
<span id="myback">[]</span>
<span id="myfwd">[]</span>
<div id="main">Please enable the javascript.</div>
</body>
</html>
